<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input placeholder="请输入商品名称" v-model="queryParam.goods_name" allowClear> </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="供货商">
                <a-select show-search :filter-option="filterOption" v-model="queryParam.supplier_id" allowClear>
                  <a-select-option :value="item.id" v-for="item in allSupplier" :key="item.id">
                    {{ item.supplier_name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="价格区间">
                <div class="numberBox" style="display: flex; align-items: center">
                  <div class="inp" style="flex: 1">
                    <a-input-number
                      :precision="2"
                      style="width: 100%"
                      v-model="queryParam.min_money"
                      :min="0"
                    ></a-input-number>
                  </div>
                  <span style="padding: 0 5px">~</span>
                  <div class="inp" style="flex: 1">
                    <a-input-number
                      v-model="queryParam.max_money"
                      :precision="2"
                      style="width: 100%"
                      :min="queryParam.min_money + 0.01"
                    ></a-input-number>
                  </div>
                </div>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item>
                <a-button type="primary" @click="clearData">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card :bordered="false" class="card_style_re" style="margin-top: 20px">
      <a-radio-group v-model="queryParam.sort" :style="{ marginBottom: '20px' }" @change="clearData">
        <a-radio-button value="1"> 最新 </a-radio-button>
        <a-radio-button value="2"> 售价 </a-radio-button>
        <a-radio-button value="3"> 采购数 </a-radio-button>
      </a-radio-group>

      <div class="goodsList">
        <div class="item" v-for="item of list" :key="item.id">
          <div class="box">
            <div class="img">
              <img :src="item.pic_url" alt="" />
              <div class="des">
                <a class="on" href="javascript:;" @click="checkGoods(item)">申请加入</a>
              </div>
            </div>

            <div class="txt">
              <h3>{{ item.name }}</h3>
              <div>
                <div>零售价<em>￥</em>{{ item.original_price }}</div>
                <!-- <div>预估利润<em>￥</em>{{ (item.sale_price - item.price).toFixed(2) }}</div> -->
                <!-- <div>上架时间 {{ item.up_time }}</div> -->
              </div>
              <div class="price"><em>￥</em>{{ item.price }}</div>

              <!-- <div class="number">
                <em>{{ item.sold_num }}</em
                >采购数
              </div> -->

              <div class="name">{{ item.supplier.supplier_name }}</div>
            </div>
          </div>
        </div>
      </div>

      <div style="text-align: right">
        <el-pagination
          :current-page="queryParam.page"
          background
          layout="prev, pager, next"
          :total="totalCount"
          @current-change="(e) => tablePageChange(e)"
        >
        </el-pagination>
      </div>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { bindFrontAgentGoods, frontAgentGoodsList } from '@/api/daili.js'
import { supplierList } from '@/api/purchase/purchase'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '商品名称',
    scopedSlots: {
      customRender: 'name',
    },
    width: 200,
  },
  {
    title: '供货商信息',
    scopedSlots: {
      customRender: 'supplier',
    },
    width: 200,
  },
  {
    title: '售价',
    dataIndex: 'price',
    scopedSlots: {
      customRender: 'price',
    },
    sorter: (a, b) => a.price - b.price,
  },
  {
    title: '库存',
    dataIndex: 'num',
    sorter: (a, b) => a.num - b.num,
  },
  {
    title: '采购次数',
    dataIndex: 'sold_num',
    sorter: (a, b) => a.sold_num - b.sold_num,
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  name: 'saasGoodsAgentSetting',
  components: {},
  data() {
    return {
      queryParam: {
        page: 1,
        limit: 10,
        goods_name: '',
        supplier_id: '',
        sort: '1',
        // price_type: '',
        min_money: '',
        max_money: '',
      },
      columns,
      list: [],
      totalCount: 0,
      allSupplier: [],
    }
  },

  methods: {
    async supplierList() {
      const res = await supplierList({ page: 1, limit: 50 })
      if (res.code == 0) {
        this.allSupplier = res.data.list
      }
    },

    tablePageChange(e) {
      this.queryParam.page = e
      this.getList()
    },

    clearData() {
      this.queryParam.page = 1
      this.getList()
    },

    // 获取数据
    async getList() {
      const hide = this.$message.loading('加载中...', 1000)
      const res = await frontAgentGoodsList(this.queryParam)
      if (res.code == 0) {
        this.list = res.data.list
        this.totalCount = res.data.count
      }
      hide()
    },

    async checkGoods(scope) {
      this.$confirm({
        title: '是否申请加入？',
        onOk: async () => {
          const res = await bindFrontAgentGoods({ cloud_goods_id: scope.id })
          this.callback(res)
        },
        onCancel() {},
      })
    },

    callback(res) {
      if (!res.code) {
        this.getList()
        this.$message.success(res.msg)
        return
      }

      this.$message.error(res.msg)
    },
  },

  created() {
    this.getList()
    this.supplierList()
  },
}
</script>

<style lang="less" scoped>
.goodsList {
  display: flex;
  flex-wrap: wrap;
  margin-left: -24px;

  .item {
    width: 20%;
  }

  .box {
    margin: 0 0 24px 24px;
    border: 1px solid #f0f2f5;
    border-radius: 4px;

    &:hover {
      .img .des {
        opacity: 1;
      }
    }
  }

  .txt {
    padding: 16px;
    color: rgba(0, 0, 0, 0.45);

    h3 {
      font-size: 14px;
      line-height: 24px;
      height: 48px;
      display: -webkit-box;
      white-space: normal;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      overflow: hidden;
      color: #000;
    }

    .price {
      padding-bottom: 5px;
      color: #ff4d4f;
      font-size: 16px;

      em {
        font-size: 12px;
        font-style: normal;
      }
    }

    .name,
    .number,
    .price {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .number {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      em {
        font-style: normal;
        color: #1890ff;
      }
    }
  }

  .img {
    position: relative;
    padding-top: 100%;

    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .des {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      background: #0084fe;
      transition: 0.3s;
      opacity: 0;

      a {
        overflow: hidden;
        text-align: center;
        // width: 50%;
        flex: 1;
        height: 28px;
        line-height: 28px;
        color: #fff;

        // &.on:after {
        //   content: '';
        //   position: absolute;
        //   left: 50%;
        //   top: 50%;
        //   margin: -6px 0 0 -0.5px;
        //   width: 1px;
        //   height: 12px;
        //   background: #fff;
        // }
      }
    }
  }
}
</style>
